<template>
	<view>

		<view class="px-3 py-2 position-fixed top-0 wid100 box-b heade bg-white flex align-center" style="z-index: 9999;">
			<!-- <picker class="py-1 px-2 box-b" style=""
				@change="bindPickerChange" :value="index" :range="pickList" range-key="name"> -->
				<view class="py-1 px-2 box-b">
					<view class="flex flex-row justify-between align-center" style="position: relative;">
						<text class="ml-1 mr-1 fw5" style="color:#333;font-size: 24rpx;">{{pickCity.name}}</text>
						<u-icon name="arrow-down" color="#333" size="11"></u-icon>
						<cityP @choiceCity='choiceCity' style="position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 2;opacity: 0;"></cityP>
					</view>
				</view>
			<!-- </picker> -->
			<u-search :clearabled="false" placeholder="输入公寓名" :showAction="false" v-model="requestData.keyword"
				@blur="changeInput">
			</u-search>
		</view>
		<view class="" :style="{height:search_height+'px'}"></view>
		<block v-if="apartmentList.length">
			<view v-for="(item,index) in apartmentList" :key="index" class="flex justify-between align-center mb-3 ml-3"
				@click="toDetail(item)">
				<image style="width: 280rpx;height: 180rpx;border-radius: 8px;" class="mr-3" :src="item.thumb" mode=""></image>
				<view class="flex flex-column flex-1 justify-between" style="height:180rpx;">

					<text class="font-28 fwb cl-1a text-one" style="max-width: 320rpx;">{{item.title}}</text>
					<view class="flex align-center">
						<u-icon name="map" color="#6E6E6E" size="11"></u-icon>
						<text class="font-24 fw4 cl-aa text-one" style="max-width: 320rpx;">{{item.address}}</text>
					</view>
					<view class="flex flex-wrap">
						<block v-for="(label,labelIndex) in item.labels">
							<view v-if="labelIndex < 3 " :key="labelIndex"
								class="flex align-center py-1 px-1 rounded-10 mr-1 mb-1"
								:style="{backgroundColor:label.color}">
								<text class="font-20" style="color:#fff;">{{label.title}}</text>
							</view>
						</block>
						

					</view>
					<view class="flex align-center">
						<text class="font-20 fw5" style="color: #C40E0E;">{{item.currency}}</text>
						<text class="font-28 fw5"
							style="color: #C40E0E;margin-left: 6rpx;margin-right: 6rpx;">{{item.price}}</text>
						<text class="font-20 fw4 cl-88">起 /周</text>
					</view>
				</view>
			</view>
		</block>
		<u-empty v-else mode="list" text=" " icon="http://cdn.uviewui.com/uview/empty/list.png">
		</u-empty>
		<view style="height: 100rpx;"></view>
	</view>
</template>

<script>
	import cityP from "@/components/city.vue"
	export default {
		components: {
			cityP
		},
		data() {
			return {
				pickList:[],
				pickCity:{
					name:'选择城市'
				},
				search_height: 0,
				apartmentList: [],
				total:0,
				requestData: {
					price_sort: 0, //价格排序 1-从低到高，2-从高到低
					min_price: '',
					max_price: '',
					facility_ids: '', //筛选-公寓设施id
					page: 1,
					pagesize: 6,
					school_id: '', //学校id
					city_id: '', //城市id
					keyword: ''
				}
			}
		},
		onReachBottom() {
			if(this.apartmentList.length < this.total){
				this.requestData.page++
				this.getData()
			}else{
				console.log('没数据了')
			}
		},
		onLoad() {
			this.requestData.keyword = ''
			this.requestData.page = 1
			this.apartmentList = []
			this.getData()
			this.getPickList()
			
			const query = uni.createSelectorQuery().in(this)
			query.select('.heade').boundingClientRect(data => {
				this.search_height = data.height
			}).exec()
		},
		onShow() {
			
		},
		methods: {
			choiceCity(e){
				this.pickCity = e
				
				this.requestData.city_id = e.id
				this.requestData.page = 1
				this.getData()
			},
			getPickList(){
				this.$H.post(this.$api.get_city_list, {
					keyword: ''
				}, {token: false}).then(res => {
					if(res.code == 1){
						this.pickList = res.data
					}
				})
			},
			//切换城市
			bindPickerChange(e) {
				console.log(this.pickList[e.detail.value],this.pickList[e.detail.value].id)
				this.pickCity = this.pickList[e.detail.value]
				
				this.requestData.city_id = this.pickList[e.detail.value].id
				this.requestData.page = 1
				this.getData()
			},
			toDetail(item) {
				this.jump({
					url: `/pages/apartmentDetail/apartmentDetail?id=${item.id}`
				})
			},
			changeInput(e) {
				this.requestData.page = 1
				this.apartmentList = []
				this.getData()
			},
			getData() {
				this.$H.post(this.$api.apartment_list, {
					...this.requestData
				}, {
					token: false
				}).then(res => {
					if(res.code == 1){
						if(this.requestData.page == 1){
							this.apartmentList = res.data.list
						}else{
							this.apartmentList = [...this.apartmentList,...res.data.list]
						}
					}
					this.total = res.data.total
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
